<template>
  <div class="meet-list">
    <div class="content">
      <div class="table-con">
        <MeetTable
          ref="MeetTable"
          :source="tableList"
          @del-meet="delMeet"
          @edit-meet="editMeet"
          @cancle-meet="cancleMeet"
          @detail="detailMeet"
          @update-meet="updateMeet">
          <div slot="search" class="search-box">
            <div class="search-left">
              <div class="search-item">
                <div class="item_label" style="min-width: 60px">会议时间:</div>
                <el-date-picker
                  size="small"
                  :popper-append-to-body="false"
                  v-model="timeL"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  @change="selectFun"></el-date-picker>
              </div>
            </div>
            <div class="search-right">
              <div class="search-item">
                <el-input
                  placeholder="请输入会议主题或地点"
                  v-model.trim="searchContent"
                  size="small"
                  clearable
                  @keyup.enter.native="selectFun">
                  <el-button slot="append" icon="el-icon-search" @click.stop="selectFun">查询</el-button>
                </el-input>
              </div>
              <div class="search-item">
                <el-button icon="el-icon-plus" type="primary" size="small" v-if="isAdminRole" @click="editRoom">
                  会议室管理
                </el-button>
              </div>
              <div class="search-item">
                <el-button
                  icon="el-icon-plus"
                  type="primary"
                  size="small"
                  @click="addMeeting()"
                  v-if="isNormalRole || isOtherRole || isOrgRole">
                  录入会议
                </el-button>
              </div>
            </div>
          </div>
          <div slot="search" class="search-box">
            <div class="search-left">
              <span
                v-for="item in numInfo"
                :key="item.id"
                class="num-li"
                :class="{ active_num: activeTab === item.id }"
                @click="tabChange(item.id)">
                {{ item.type }} {{ item.num }}
              </span>
            </div>
          </div>
          <pagination
            slot="pagination"
            :page-size.sync="pageParam.pageSize"
            :total="pageParam.totalSize"
            :current-page.sync="pageParam.currentPage"
            :pageSizes="[10, 20]"
            layout="slot,prev, pager, next, sizes, jumper"
            @change="onPageChange"></pagination>
        </MeetTable>
      </div>
    </div>
    <XnDialog
      title="录入会议"
      :visible.sync="meetDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      class="branch_dialog"
      @closed="onClose"
      top="5vh">
      <MeetAdd
        v-if="meetDiaShow"
        @add-content="addSuccess"
        :meetId="meetId"
        :isDisabled="isDisabled"
        :isEdit="isEdit"
        @cancle-meet="cancleMeet" />
    </XnDialog>

    <XnDialog
      title="会议室管理"
      :visible.sync="meetRoomShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      class="branch_dialog"
      @close="meetRoomShow = false"
      top="5vh">
      <MeetRoomManage v-if="meetRoomShow" @close="meetRoomShow = false"></MeetRoomManage>
    </XnDialog>
  </div>
</template>

<script>
import pagination from '@com/pagination'
import MeetTable from './MeetTable'
import MeetAdd from './MeetAdd'
import XnDialog from '@com/xnDialog.vue'
import MeetRoomManage from './MeetRoomManage.vue'
import { mapGetters } from 'vuex'
import { getMeetingStatusSum, getlistMeetingPages, delMeeting, cancelMeeting } from '@apis/meeting.js'
export default {
  name: 'meetingList',
  components: { pagination, MeetTable, MeetAdd, XnDialog, MeetRoomManage },
  props: {},
  data() {
    return {
      tableList: [],
      timeL: [],
      searchContent: '',
      pageParam: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      numInfo: [
        { type: '全部', num: 0, id: '' },
        // { type: '草稿', num: 0, id: '0' },
        { type: '待审批', num: 0, id: '1' },
        { type: '未开始', num: 0, id: '2' },
        { type: '进行中', num: 0, id: '3' },
        { type: '已结束', num: 0, id: '4' },
        { type: '已取消', num: 0, id: '5' },
      ],
      activeTab: '',
      meetDiaShow: false,
      meetId: '', // 编辑或审批的会议Id
      meetRoomShow: false,
      isDisabled: false,
      isEdit: false,
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isOrgRole']),
  },
  created() {},
  mounted() {
    this.initData()
    console.log('this.$route.query :>> ', this.$route.query)
    if (this.$route.query.id) {
      this.meetId = this.$route.query.id
      if (this.$route.query.type === '1') {
        this.isEdit = true
        this.meetDiaShow = true
      } else if (this.$route.query.type === '2') {
        this.isEdit = false
        this.isDisabled = true
        this.meetDiaShow = true
      }
    }
  },
  methods: {
    selectFun() {
      this.pageParam.currentPage = 1
      this.initData()
    },
    onPageChange(obj) {
      this.pageParam.currentPage = obj.pageNumber
      this.pageParam.pageSize = obj.pageSize
      this.getlistMeetingPages()
    },
    tabChange(id) {
      if (id === this.activeTab) return
      this.activeTab = id
      this.pageParam.currentPage = 1
      this.getlistMeetingPages()
    },
    addMeeting() {
      this.meetId = ''
      this.isDisabled = false
      this.isEdit = false
      this.meetDiaShow = true
    },
    addSuccess(data) {
      if (data !== '2') {
        this.meetDiaShow = false
      }
      if (data === '3') {
        this.clearUrl()
      }
      this.pageParam.currentPage = 1
      this.initData()
    },
    initData() {
      this.getMeetingStatusSum()
      this.getlistMeetingPages()
    },
    getMeetingStatusSum() {
      const param = {
        startTime: (this.timeL && this.timeL[0]) || '',
        endTime: (this.timeL && this.timeL[1]) || '',
        fuzzyQuery: this.searchContent,
        meetingStatus: this.activeTab,
        tenantId: localStorage.pskh_tenantId,
      }
      getMeetingStatusSum(param).then(res => {
        if (res.code === 0) {
          this.numInfo[0].num = res.data.total || 0
          this.numInfo[1].num = res.data.needApprove || 0
          this.numInfo[2].num = res.data.notStart || 0
          this.numInfo[3].num = res.data.inProgress || 0
          this.numInfo[4].num = res.data.ended || 0
          this.numInfo[5].num = res.data.cancelled || 0
        }
      })
    },
    getlistMeetingPages() {
      const param = {
        startTime: (this.timeL && this.timeL[0]) || '',
        endTime: (this.timeL && this.timeL[1]) || '',
        fuzzyQuery: this.searchContent,
        meetingStatus: this.activeTab,
        tenantId: localStorage.pskh_tenantId,
        current: this.pageParam.currentPage,
        size: this.pageParam.pageSize,
      }
      getlistMeetingPages(param).then(res => {
        if (res.code === 0) {
          this.tableList = res.data.records
          this.pageParam.totalSize = res.data.total
        }
      })
    },
    delMeet(id) {
      delMeeting({ id: id }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.initData()
        }
      })
    },
    editMeet(id) {
      this.meetId = id
      this.isDisabled = false
      this.isEdit = false
      this.meetDiaShow = true
    },
    cancleMeet(id) {
      cancelMeeting({ id: id }).then(res => {
        if (res.code === 0) {
          this.$message.success('取消成功')
          if (this.isEdit) {
            this.clearUrl()
          }
          this.meetId = ''
          this.isDisabled = false
          this.meetDiaShow = false
          this.initData()
        }
      })
    },
    detailMeet(id) {
      this.meetId = id
      this.isDisabled = true
      this.isEdit = false
      this.meetDiaShow = true
    },
    editRoom() {
      this.meetRoomShow = true
    },
    updateMeet(id) {
      this.meetId = id
      this.isEdit = true
      this.meetDiaShow = true
    },
    onClose() {
      this.meetId = ''
      this.isDisabled = false
      this.isEdit = false
      this.meetDiaShow = false
      this.clearUrl()
    },
    clearUrl() {
      const url = window.location.href
      const urlArr = url.split('?')
      window.history.replaceState(null, null, urlArr[0])
      this.$route.query.id = ''
      this.$route.query.type = ''
      this.isEdit = false
    },
  },
}
</script>
<style lang="scss" scoped>
.meet-list {
  height: 100%;
  padding-top: 5px;
  padding-bottom: 15px;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .table-con {
      flex: 1;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      .search-item {
        display: flex;
        align-items: center;
        .item_label {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
